<!--
 * @Author: Chuckie
 * @Email: chuckie@aliyun.com
 * @Date: 2022-11-10 14:35:49
 * @LastEditTime: 2023-04-11 11:31:34
 * @Description: 
 * @FilePath: /web/src/views/system/dict/info/list.vue
 *  
-->
<template>
  <div class="app-container scroll-y">
    <!--操作-->
    <div class="page-filter rowSS">
      <!--条件搜索-->
      <el-form ref="refsearchForm" :inline="true" class="demo-searchForm">
        <el-form-item :label="$t('common.search.keywords')">
          <el-input v-model="state.filter.keyword" :disabled="state.table.loading" :placeholder="$t('common.search.placeholder.input')" />
        </el-form-item>
        <el-form-item :label="$t('sysDictInfo.search.type')">
          <el-select v-model="state.filter.typeId" :disabled="state.table.loading" :placeholder="$t('common.search.placeholder.select')" clearable>
            <el-option
              v-for="(value, key) in state.dictType"
              :key="parseInt(key)"
              :label="value"
              :value="parseInt(key)"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <!--查询按钮-->
      <el-button type="primary" :disabled="state.table.loading" @click="onSelect">
        <el-icon style="vertical-align: middle">
          <Search />
        </el-icon>
         <span style="vertical-align: middle">{{$t('common.search.search')}}</span>
      </el-button>
      <el-button type="primary" :disabled="state.table.loading" @click="router.push('/system/dict/info/detail')">
        <el-icon style="vertical-align: middle">
          <Plus />
        </el-icon>
         <span style="vertical-align: middle">{{$t('common.search.add')}}</span>
      </el-button>
      <el-popconfirm :title="$t('common.message.sure')" @confirm="onRemoves">
        <template #reference>
          <el-button type="danger" :disabled="!multipleSelection.length">
            <el-icon style="vertical-align: middle">
              <Delete />
            </el-icon>
           <span style="vertical-align: middle">{{$t('common.search.batchDelete')}}</span>
          </el-button>
        </template>
      </el-popconfirm>
    </div>

    <!--数据-->
    <div class="page-data">
      <el-table
      
        ref="multipleTableRef"
        v-loading="state.table.loading"
        :data="state.table.dataSource"
        :border="true"
        stripe
        table-layout="auto"
        @selection-change="onSelectionChange"
      >
        <el-table-column type="selection" width="36" align="center" fixed />
        <el-table-column type="index" width="50" :label="$t('common.table.serialNumber')" align="center" fixed />

        <el-table-column property="typeName" :label="$t('sysDictInfo.search.type')" />
        <el-table-column property="typeCode" :label="$t('sysDictInfo.table.typeCode')" />
        <el-table-column property="name" :label="$t('sysDictInfo.table.name')" />
        <el-table-column property="code"  :label="$t('sysDictInfo.table.code')" />

        <el-table-column property="pid"  :label="$t('sysDictInfo.table.parentId')" />

        <el-table-column fixed="right" :label="$t('common.table.operation.operation')" width="200">
          <template #default="scope">
            <!-- <el-button link type="success" size="small">详情</el-button> -->
            <el-button
              link
              type="primary"
              size="small"
              @click="router.push(`/system/dict/info/detail/${scope.row.id}`)"
            >
              {{$t('common.table.operation.edit')}}
            </el-button>

            <el-popconfirm :title="$t('common.message.sure')" @confirm="onRemove([scope.row.id])">
              <template #reference>
                <el-button link type="danger" size="small">{{$t('common.table.operation.delete')}}</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-pagination">
      <el-pagination
        v-model:currentPage="state.pagination.pageNum"
        v-model:page-size="state.pagination.pageSize"
        :page-sizes="[20, 50, 100]"
        small="small"
        :disabled="state.table.loading"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.pagination.total"
        @current-change="onSelect"
        @size-change="onSelect"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElTable } from 'element-plus'
import { Search, Delete, Plus } from '@element-plus/icons-vue'
import { DictInfo, select, remove } from './api/dict-info'
import { select as selectBase } from './api/dict-type'
const { proxy }: any = getCurrentInstance()

const router = useRouter()

const state = reactive({
  filter: {
    keyword: null,
    typeId: ''
  },
  table: {
    loading: true,
    dataSource: Array<DictInfo>()
  },
  pagination: {
    pageNum: 1,
    pageSize: 20,
    total: 0
  },

  dictType: {}
})

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<DictInfo[]>([])

const onSelectionChange = (records: DictInfo[]) => {
  multipleSelection.value = records
}

const onSelect = async () => {
  state.table.loading = true
  const data1 = await selectBase({})
  data1.data.items.forEach((ele) => (state.dictType[ele.id] = ele.typeName))

  const data = await select({ pageNum: state.pagination.pageNum, pageSize: state.pagination.pageSize, ...state.filter })
  state.table.dataSource = data.data.items

  state.pagination.total = data.data.total
  state.table.loading = false
}

const onRemoves = async () => {
  onRemove(multipleSelection.value.map((item: DictInfo) => String(item.id) || ''))
}

const onRemove = async (ids: Array<string>) => {
  const data = await remove(ids)
  proxy.$message({  message: proxy.$t('common.message.deleteSuccessfully'), type: 'success' })
  onSelect()
}

onMounted(() => {
  onSelect()
})
</script>
